<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="initData"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <line-chart
          v-if="showMealTrendTime"
          chartTitle="每月出餐平均时间"
          :chart-data="mealTrendTimeChartData"
          :chart-config="mealTrendTimeChartConfig"
          height="400px"
        />
      </el-col>
    </el-row>
    <el-table :data="tableData" v-loading="loading" stripe>
      <el-table-column prop="date" label="日期"> </el-table-column>
      <el-table-column prop="date" label="门店"> </el-table-column>
      <el-table-column label="菜品数量">
        <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="queryDishesInfo('','',scope.row)">

                        A({{ scope.row.acount }})B({{ scope.row.bcount }})C({{
            scope.row.ccount
          }})
            </el-link>

        </template>
      </el-table-column>
      <el-table-column prop="avgCookTime" label="平均切配耗时">
      </el-table-column>
      <el-table-column prop="avgServeTime" label="平均加工耗时">
      </el-table-column>
      <el-table-column prop="avgTime" label="平均耗时"> </el-table-column>
      <el-table-column prop="consumeTime" label="出餐耗时"> </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :show="total > 0"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog  :visible.sync="dialogTableVisible"  width="1200px" :close-on-click-modal="false">
  <el-table :data="gridData">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column property="orderNo" label="单号"></el-table-column>
    <el-table-column property="name" label="菜品名称"></el-table-column>
    <el-table-column property="atchType" label="菜品类型"  width="80"></el-table-column>
    <el-table-column label="下单时间">
      <template slot-scope="scope">
          {{ parseTime(scope.row.callUpTime) }}
        </template>
    </el-table-column>
    <el-table-column label="配菜时间">
      <template slot-scope="scope">
          {{ parseTime(scope.row.cookFinishTime) }}
        </template>
    </el-table-column>
    <el-table-column label="传菜时间">
      <template slot-scope="scope">
          {{ parseTime(scope.row.serveFinishTime) }}
        </template>
    </el-table-column>
    <el-table-column property="totalTime" label="出菜耗时" width="80"></el-table-column>
    <el-table-column property="cookTime" label="配菜耗时"  width="80"></el-table-column>
    <el-table-column property="serveTime" label="传菜耗时"  width="80"></el-table-column>
    <el-table-column property="serveTime" label="是否被迫异常"  width="80">
      <template slot-scope="scope">
        <span v-if="scope.row.timeOutType=='1'">否</span>
        <span v-if="scope.row.timeOutType=='2'">是</span>
      </template>
    </el-table-column>
  </el-table>
  <pagination
      :total="kscTotal"
      :show="kscTotal > 0"
      :page.sync="kscQueryParams.pageNum"
      :limit.sync="kscQueryParams.pageSize"
      @pagination="getKscList"
    />
</el-dialog>
  </div>
</template>
<script>
import lineChart from "@/views/dashboard/LineChart.vue";
import {
  getBsKscDayList,
  buildDayDataChart,
  buildDayAvgTimeDataChart,
} from "@/api/liangshi/bsKscDay";
import { treeselect as listDept } from "@/api/system/dept";
import {
  getKscAndArchItemInfoByDate,
  getMealStatData,
  getMealTrendChartData,
} from "@/api/liangshi/kcKcs";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { lineChart, Treeselect },
  data() {
    return {
      dialogTableVisible: false,
      loading: false,
      showDishesCount: false,
      showDishesAvgTime: false,
      showMealTrendTime: false,
      mealTrendTimeChartData: [],
      gridData: [],
      deptList: [],
      // 日期范围
      dateRange: [],
      mealTrendTimeChartConfig: {
        xAxisData: [],
        legendData: [
          "平均切配时间",
          "平均加工时间",
          "平均总耗时",
          "A类菜平均切配时间",
          "A类菜平均加工时间",
          "A类菜平均总耗时",
          "B类菜平均切配时间",
          "B类菜平均加工时间",
          "B类菜平均总耗时",
          "C类菜平均切配时间",
          "C类菜平均加工时间",
          "C类菜平均总耗时",
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: "1",
      },
      kscQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      kscTotal: 0,
      tableData: [],
    };
  },
  created() {
    this.initData();
    // this.getDeptList();
  },
  methods: {
    getKscList() {
      getKscAndArchItemInfoByDate(this.kscQueryParams).then((res) => {
        this.gridData = res.rows;
        this.kscTotal = res.total;
        this.dialogTableVisible = true;
      });
    },
    queryDishesInfo(itemType, outType, item) {
      this.kscQueryParams.date = item.date;
      this.kscQueryParams.shift = item.shift;
      this.kscQueryParams.shopId = this.queryParams.shopId;
      this.getKscList();
    },
    getDeptList() {
      listDept().then((res) => {
        this.deptList = res.data;
      });
    },
    initData() {
      this.getList();
      this.getMealTrendChartData();
    },
    getList() {
      this.loading = true;
      getMealStatData(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then((res) => {
        this.loading = false;
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    getMealTrendChartData() {
      this.showMealTrendTime = true;
      this.mealTrendTimeChartData = [];
      getMealTrendChartData(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then((res) => {
        const dateList = [];
        const avgCookTimeList = [];
        const avgServeTimeList = [];
        const avgTimeList = [];

        const aAvgCookTimeList = [];
        const aAvgServeTimeList = [];
        const aAvgTimeList = [];

        const bAvgCookTimeList = [];
        const bAvgServeTimeList = [];
        const bAvgTimeList = [];

        const cAvgCookTimeList = [];
        const cAvgServeTimeList = [];
        const cAvgTimeList = [];
        res.data.forEach((item) => {
          dateList.push(item.date);
          avgCookTimeList.push(item.avgCookTime);
          avgServeTimeList.push(item.avgServeTime);
          avgTimeList.push(item.avgTime);

          aAvgCookTimeList.push(item.aavgCookTime);
          aAvgServeTimeList.push(item.aavgServeTime);
          aAvgTimeList.push(item.aavgTime);

          bAvgCookTimeList.push(item.bavgCookTime);
          bAvgServeTimeList.push(item.bavgServeTime);
          bAvgTimeList.push(item.bavgTime);

          cAvgCookTimeList.push(item.cavgCookTime);
          cAvgServeTimeList.push(item.cavgServeTime);
          cAvgTimeList.push(item.cavgTime);
        });
        this.mealTrendTimeChartConfig.xAxisData=dateList;
        this.mealTrendTimeChartData.push({name:'平均切配时间',data:avgCookTimeList})
        this.mealTrendTimeChartData.push({name:'平均加工时间',data:avgServeTimeList})
        this.mealTrendTimeChartData.push({name:'平均总耗时',data:avgTimeList})

        this.mealTrendTimeChartData.push({name:'A类菜平均切配时间',data:aAvgCookTimeList})
        this.mealTrendTimeChartData.push({name:'A类菜平均加工时间',data:aAvgServeTimeList})
        this.mealTrendTimeChartData.push({name:'A类菜平均总耗时',data:aAvgTimeList})

        this.mealTrendTimeChartData.push({name:'B类菜平均切配时间',data:bAvgCookTimeList})
        this.mealTrendTimeChartData.push({name:'B类菜平均加工时间',data:bAvgServeTimeList})
        this.mealTrendTimeChartData.push({name:'B类菜平均总耗时',data:bAvgTimeList})

        this.mealTrendTimeChartData.push({name:'C类菜平均切配时间',data:cAvgCookTimeList})
        this.mealTrendTimeChartData.push({name:'C类菜平均加工时间',data:cAvgServeTimeList})
        this.mealTrendTimeChartData.push({name:'C类菜平均总耗时',data:cAvgTimeList})
      });
    },
    getDishesAvgTimeChartData() {
      this.showDishesAvgTime = false;
      this.dishesAvgTimeChartData = [];
      buildDayAvgTimeDataChart(
        this.addDateRange(this.queryParams, this.dateRange, true)
      ).then((res) => {
        this.dishesAvgTimeChartConfig.xAxisData = res.dayData;
        this.dishesAvgTimeChartData.push({
          name: "每天平均出餐时间",
          data: res.avgTotalTime,
        });
        this.dishesAvgTimeChartData.push({
          name: "A类菜品平均出餐时间",
          data: res.avgATotalTime,
        });
        this.dishesAvgTimeChartData.push({
          name: "B类菜品平均出餐时间",
          data: res.avgBTotalTime,
        });
        this.dishesAvgTimeChartData.push({
          name: "C类菜品平均出餐时间",
          data: res.avgCTotalTime,
        });
        this.showDishesAvgTime = true;
      });
    },
  },
};
</script>

<style>
</style>